<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="dateTypes" class="zs-select-md zs-space-right-sm" placeholder="类型" clearable multiple
                    collapse-tags collapse-tags-tooltip>
                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-date-picker class="zs-space-right-sm" v-model="startDate" type="date" placeholder="开始日期" :clearable="false" value-format="YYYY-MM-DD"/>
                <el-date-picker class="zs-space-right-sm" v-model="endDate" type="date" placeholder="结束日期"  :clearable="false" value-format="YYYY-MM-DD"/>
                <el-button class="zs-btn-plain" @click="getData()">
                    查询
                </el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="日期" width="80" :align="'left'">
                    <template #default="scope">
                        {{ scope.row.ddate.substring(5,scope.row.ddate.length) }}
                    </template>
                </el-table-column>
                <el-table-column prop="dateType" label="类型" width="120" :align="'center'" />
                <el-table-column label="销售额" :align="'right'" >
                    <template #default="scope">
                        {{ scope.row.saleAmount}}
                    </template>
                </el-table-column>
                <el-table-column label="同比上周" :align="'right'" >
                    <template #default="scope">
                        {{ scope.row.saleAmountW2w == '-' ? '-' : `${scope.row.saleAmountW2w}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="同比上月" :align="'right'" >
                    <template #default="scope">
                        {{ scope.row.saleAmountM2m == '-' ? '-' : `${scope.row.saleAmountM2m}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="同比上年" :align="'right'" >
                    <template #default="scope">
                        {{ scope.row.saleAmountY2y == '-' ? '-' : `${scope.row.saleAmountY2y}%` }}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="300" :align="'right'">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="zs-space-top-sm zs-table-page-pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
                    :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import detailApi from '@/api/Manage/Business/detailPages'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

let biProjectCode = ref(route.biProjectCode)
const dateTypes = ref([])
const startDate = ref(route.startDate)
const endDate = ref(route.endDate)

const typeOptions = [
    {
        value: '平日',
        label: '平日',
    },
    {
        value: '周末',
        label: '周末',
    },
    {
        value: '节假日',
        label: '节假日',
    }
]

const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
// 分页
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
    curPageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}

const goDetail = (row) => {
    router.push({
        path: '/Manage/Business/salesVolumeBrand',
        query: {
            // rid: 'page_dashboard_pc_iframe',
            rTitle: '品牌销售明细',
            biProjectCode: biProjectCode.value,
            dataTime: row.ddate,
        },
    })
}

const tableData = ref([])
const getList = () => {
    detailApi.saleChildApi({ biProjectCode: biProjectCode.value, startDate: startDate.value, endDate: endDate.value, dateTypes: dateTypes.value, pageNo: currentPage.value, pageSize: curPageSize.value }).then((res) => {
        if (res.data.code == 200) {
            tableData.value = res.data.data.childList
            total.value = res.data.data.totalCount
        }
    })
}
const getData = () => {
    currentPage.value = 1
    getList()
}
getData()
</script>
  
  
<style scoped lang="scss"></style>